const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

console.log('process.env.NODE_ENV=', process.env.NODE_ENV) // 打印环境变量

const config = {
    mode: 'development', // 模式
    entry: './src/index.js', // 打包入口地址
    output: {
        filename: 'bundle.js', // 输出文件名
        path: path.join(__dirname, 'dist') // 输出文件目录
    },
    module: {
        rules: [ // 转换规则
            {
                test: /\.(s[ac]|c)ss$/, //匹配所有的 css 文件
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader, // 添加 loader 打包生成统一的样式文件
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ] // use: 对应的 Loader 名称
            },
            // 使用webpack5自带的 asset module 允许使用资源文件（字体，图标等）而无需配置额外的 loader。
            {
                test: /\.(jpe?g|png|gif)$/i,
                type: 'asset',
                generator: {
                    // 输出文件位置以及文件名
                    // [ext] 自带 "." 这个与 url-loader 配置不同
                    filename: "[name][hash:8][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 7 * 1024 //超过50kb不转 base64
                    }
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
                type: 'asset',
                generator: {
                    // 输出文件位置以及文件名
                    filename: "[name][hash:8][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 超过100kb不转 base64
                    }
                }
            },
            //配置babel-loader .babelrc 只是为了解耦 这里一定要配置
            {
                test: /\.js$/i,
                use: ['babel-loader']
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({ // 添加插件
            // filename: '[name].[hash:8].css'
            filename: '[name].css'
        }),

    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'public'), // 静态文件目录
        compress: true, //是否启动压缩 gzip
        port: 8889, // 端口号
        // open:true  // 是否自动打开浏览器
    },
    resolve: {
        alias: {
            '@c': path.resolve(__dirname, './src/js/components/'),
            '@u': path.resolve(__dirname, './src/js/utils/'),
            '@a': path.resolve(__dirname, './public/')

        },
    },
}

module.exports = (env, argv) => {
    console.log('argv.mode=', argv.mode) // 打印 mode(模式) 值
    // 这里可以通过不同的模式修改 config 配置
    return config;
}
